<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="always">
        <!-- 面包屑 -->
        <div slot="header" class="clearfix">
          <el-breadcrumb
            v-if="$route.query.name"
            separator-class="el-icon-arrow-right"
            style="margin: 0 0 50px 0"
          >
            <el-breadcrumb-item>学科管理</el-breadcrumb-item>
            <el-breadcrumb-item>{{ $route.query.name }}</el-breadcrumb-item>
            <el-breadcrumb-item>目录管理</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div slot="header">
          <!-- 表单头 -->
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="标签名称">
              <el-input v-model.trim="formInline.tagName"></el-input>
            </el-form-item>
            <el-form-item label="状态">
              <el-select v-model="formInline.state" placeholder="请选择">
                <el-option label="启用" value="1"></el-option>
                <el-option label="禁用" value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item style="">
              <el-button @click="reset">清除</el-button>
              <el-button type="primary" @click="onSubmit">搜索</el-button>
            </el-form-item>
          </el-form>
          <el-button
            type="text"
            v-if="$route.query.name"
            style="float: right; margin-top: -60px; margin-right: 150px"
            @click="$router.back()"
          >
            <i class="el-icon-back"></i> 返回学科</el-button
          >
          <el-button
            style="float: right; margin-top: -60px"
            type="success"
            size="medium"
            @click="addCatalog"
          >
            <i class="el-icon-edit">新增标签</i>
          </el-button>
        </div>
        <!-- 表格 -->
        <el-col
          :span="24"
          style="background-color: #f4f4f5; padding: 10px; margin-bottom: 20px"
        >
          <i class="el-icon-warning">数据一共{{ total }}条</i>
        </el-col>

        <el-table :data="tableData" style="width: 100%">
          <el-table-column type="index" prop="date" label="序号">
          </el-table-column>
          <el-table-column prop="subjectName" label="所属学科">
          </el-table-column>
          <el-table-column prop="tagName" label="标签名称"> </el-table-column>
          <el-table-column prop="username" label="创建者"> </el-table-column>
          <el-table-column label="创建日期">
            <template #default="{ row }"
              >{{ formatDate(row.addDate) }}
            </template>
          </el-table-column>
          <el-table-column prop="state" label="状态"> </el-table-column>
          <el-table-column prop="address" label="操作">
            <template #default="{ row }">
              <el-button type="text" size="default" @click="isNo(row)">{{
                row.state ? "禁用" : "启用"
              }}</el-button>
              <el-button
                type="text"
                size="default"
                @click="edit(row)"
                :disabled="row.state ? true : false"
                >修改</el-button
              >
              <el-button
                type="text"
                size="default"
                @click="del(row)"
                :disabled="row.state ? true : false"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <div class="block" style="float: right">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageData.page"
            :page-sizes="[5, 10, 20, 50]"
            :page-size="pageData.pagesize"
            layout="prev, pager, next, sizes,jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </el-card>
    </div>
    <tagsAdd :isShow.sync="isShow"></tagsAdd>
  </div>
</template>

<script>
// 获取目录列表 改变状态 删除
import { list as getList, changeState, remove } from '@/api/hmmm/tags.js'
// 导入dialog组件
import tagsAdd from '../components/tags-add'
import dayjs from 'dayjs'
export default {
  components: {
    tagsAdd
  },
  data () {
    return {
      // dialog弹框
      isShow: false,
      // 接口需要
      pageData: {
        page: 1, // 当前页
        pagesize: 10// 每页多少条目
      },
      // 总条目数
      total: 10,
      // 表单数据
      formInline: {
        tagName: '',
        state: ''
      },
      // 列表数据
      tableData: []
    }
  },
  methods: {

    formatDate (value, str = 'YYYY-MM-DD HH:mm:ss') {
      return dayjs(value).format(str)
    },

    // 分页功能 - 改变每页条数
    handleSizeChange (val) {
      this.pageData.pagesize = val
      this.getData()
      this.formInline.tagName = ''
    },
    // 分页功能 - 改变当前页
    handleCurrentChange (val) {
      this.pageData.page = val
      this.getData()
      this.formInline.tagName = ''
    },
    async getData () {
      if (this.$route.query.id) {
        this.pageData.subjectID = this.$route.query.id
      }
      const { data } = await getList(this.pageData)
      console.log(data)
      this.tableData = data.items
      this.total = data.counts
    },
    // 是否启用
    async isNo (data) {
      // console.log(data)
      let state = 1
      if (data.state === 1) {
        state = 0
      }
      await changeState({ id: data.id, state })
      this.$message.success('修改成功')
      // 重新渲染数据
      this.getData()
    },
    // 编辑功能
    edit (data) {
      this.isShow = true
      // console.log(this.$children)
      this.$children[1].getDetail(data)
    },
    // 删除功能
    del (data) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await remove(data)
        // 刷新数据
        this.getData()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 提交
    async onSubmit () {
      if (this.formInline.state === '') {
        delete this.formInline.state
      }
      if (this.$route.query.id) {
        this.pageData.subjectID = this.$route.query.id
      }
      const { data } = await getList({ ...this.pageData, ...this.formInline })
      this.tableData = data.items
      this.total = data.counts
      delete this.pageData.subjectID
    },
    // 清空
    reset () {
      this.formInline = {
        tagName: '',
        state: ''
      }
    },
    // 添加功能
    addCatalog () {
      this.isShow = true
    }
  },
  created () {
    this.getData()
  }
}
</script>
<style scoped lang='less'>
</style>
